<template>
  <div class="my">
    <div class="top">
      <div class="user">
        <div class="big-img">
          <div>
            <img src="../../../assets/jay.jpg" alt @click="show = true" />
          </div>
          <van-overlay :show="show" @click="show = false" />
        </div>

          <p>110</p>

      </div>
      <div class="tab">
        <div class="tab-con">
          <p class="tab-con-p">会员等级</p>
          <p class="tab-con-p1">V0</p>
        </div>
        <div class="tab-con">
          <p class="tab-con-p">吉致币</p>
          <p class="tab-con-p1">0</p>
        </div>
        <div class="tab-con">
          <p class="tab-con-p">优惠券</p>
          <p class="tab-con-p1">0</p>
        </div>
        <div class="tab-con">
          <p class="tab-con-p">兑换券</p>
          <p class="tab-con-p1">0</p>
        </div>
      </div>
    </div>
    <div class="null"></div>
    <router-link tag="div" class="person-dd" to="/usermy/order">
      <div class="person-dd1">
        <span class="person-dd2">
          <img src="../../../assets/mw-person-dd.png" alt />
        </span>
        <span class="person-dd3">我的订单</span>
        <span class="person-dd4">
          <img src="../../../assets/mw_firm_right.jpg" alt />
        </span>
      </div>
    </router-link>
    <router-link tag="div" class="person-dd person-dd0" to="/usermy/address">
      <div class="person-dd1">
        <span class="person-dd2">
          <img src="../../../assets/mw_firm_ad.jpg" alt />
        </span>
        <span class="person-dd3">收货地址</span>
        <span class="person-dd4">
          <img src="../../../assets/mw_firm_right.jpg" alt />
        </span>
      </div>
    </router-link>
    <van-button type="danger" size="large" @click="out">退出登录</van-button>
    <div class="fot">
      <div class="phone-num" style="color:#999">客服热线：400-627-5757</div>
      <div class="serve-node" style="color:#999">服务协议与证照信息</div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data: () => ({
    show: false

  }),
  methods: {
    out() {
      localStorage.removeItem('user')
      this.$router.push('/usermy')
    }

  },
  created() {

  },
  components: {}
}
</script>

<style lang="less" scoped>
.my {
  .user {
    margin-bottom: 16px;

    img {
      margin-top: 26px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-left: 40%;
    }
    p {
      text-align: center;
      margin: 0 auto;
    }
    .van-button {
      border: none;
    }

    .van-overlay {
      background-image: url('../../../assets/jay.jpg');
      background-repeat: no-repeat;
      background-position: 0px 38%;
      background-size: 100%;
    }
  }
  .tab {
    width: 100%;
    display: flex;
    flex-direction: row;
    .tab-con {
      width: 25%;
      height: 80px;
      text-align: center;
      .tab-con-p {
        color: #ccc;
        font-weight: 600;
      }
      .tab-con-p1 {
        font-size: 16px;
      }
    }
  }
  .null {
    height: 16px;
    width: 100%;
    background-color: #f7f7f7;
  }

  .person-dd {
    box-sizing: border-box;
    width: 100%;
    padding-left: 16px;
    .person-dd1 {
      border-bottom: 1px solid #ccc;
      height: 54px;
      line-height: 54px;
      .person-dd2 {
        margin-right: 10px;
        img {
          width: 16px;
          box-sizing: border-box;
          vertical-align: -5px;
          border: 0;
        }
      }
      .person-dd3 {
        font-size: 16px;
      }
      .person-dd4 {
        margin-left: 68%;
        img {
          width: 10px;
          box-sizing: border-box;
          vertical-align: -5px;
          border: 0;
        }
      }
    }
  }
  .person-dd0 {
    .person-dd1 {
      // border-bottom: none;
    }
  }
  .fot {
    height: 274px;
    background-color: #f7f7f7;
    padding-top: 130px;
    .phone-num {
      text-align: center;
    }
    .serve-node {
      margin-top: 30px;
      text-align: center;
    }
  }
}
</style>
